---
id: bd7158d8c442eddfaeb5bd13
title: Створіть генератор випадкових цитат
challengeType: 3
forumTopicId: 301374
dashedName: build-a-random-quote-machine
---

# --description--
**Примітка:** **React 18 містить відомі несумісності з тестами цього проєкту (див. [проблему](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))**

**Мета:** створити застосунок, функціонально схожий до <a href="https://random-quote-machine.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://random-quote-machine.freecodecamp.rocks/</a>.

Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем.

Для виконання цього проєкту можна використати різне поєднання HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux та jQuery. Потрібно використати фронтенд фреймворк (наприклад, React), оскільки цей розділ стосується їх вивчення. Ми не рекомендуємо використовувати інші технології та ресурси, що не були вказані вище, але ви можете застосовувати їх на власний розсуд. Ми розглядаємо використання інших фронтенд фреймворків, серед яких Angular та Vue, але наразі вони не підтримуються. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Щасливого програмування!

**Історія користувача №1:** я бачу обгортковий елемент з відповідним `id="quote-box"`.

**Історія користувача №2:** я бачу елемент з відповідним `id="text"` в межах `#quote-box`.

**Історія користувача №3:** я бачу елемент з відповідним `id="author"` в межах `#quote-box`.

**Історія користувача №4:** я бачу активний елемент з відповідним `id="new-quote"` в межах `#quote-box`.

**Історія користувача №5:** я бачу активний елемент `a` з відповідним `id="tweet-quote"` в межах `#quote-box`.

**Історія користувача №6:** мій генератор цитат показує випадкову цитату в елементі з `id="text"` при першому завантаженні.

**Історія користувача №7:** мій генератор цитат показує автора випадкової цитати в елементі з `id="author"` при першому завантаженні.

**Історія користувача №8:** мій генератор цитат вибирає нову цитату та показує її в елементі `#text`, коли натиснуто кнопку `#new-quote`.

**Історія користувача №9:** мій генератор вибирає автора нової цитати та показує його в елементі `#author`, коли натиснуто кнопку `#new-quote`.

**Історія користувача №10:** я можу твітнути отриману цитату, натиснувши елемент `a` `#tweet-quote`. Цей елемент `a` має містити шлях `"twitter.com/intent/tweet"` в атрибуті `href`, щоб твітнути отриману цитату.

**Історія користувача №11:** обгортковий елемент `#quote-box` має бути горизонтально відцентрованим. Виконайте тести зі збільшенням браузера до 100% і розгорнутою сторінкою.

Ви можете створити свій проєкт, <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">використавши цей шаблон CodePen</a> та натиснувши `Save`. Або ж ви можете скористатися цим посиланням CDN, щоб виконати тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`

Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами.

**Примітка:** твіттер не дозволяє завантажувати посилання в iframe. Спробуйте використати атрибут `target="_blank"` або `target="_top"` до елемента `#tweet-quote`, якщо твіт не завантажується. `target="_top"` замінить поточну вкладку, тому переконайтесь, що зберегли роботу.

# --solutions--

```js
// solution required
```
